var path = "../";
var lineList = [];
var barList = [];
var date = [];
var myChart = echarts.init(document.getElementById('gaikuangDiv'));

//异步加载数据
myChart.showLoading();
$.ajax({
    type: "post",
    async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
    url: path + "advSummary/summary",    //请求发送到getTig处
    data: {type: 1},
    dataType: "json",        //返回数据形式为json
    beforeSend:function(XMLHttpRequest){
        $("#loading").show();
    },
    success: function (result) {
        $("#loading").hide();
        //请求成功时执行该函数内容，result即为服务器返回的json对象
        if (result.body.length != undefined) {
            myChart.hideLoading();
            let option = setOptionParam(result);
            myChart.setOption(option);
            $(window).resize(function(){
                myChart.resize();
            });
            window.onresize = myChart.resize();
        } else {
            myChart.clear();
            option.series[0].data = "暂无数据"
            myChart.setOption(option);
        }
    },
    error: function (errorMsg) {
        //请求失败时执行该函数
        alert("图表请求数据失败!");
        myChart.hideLoading();
    }
});

var dataList=new Vue({
    el:"#advPlaySummaryList",
    data:{
        province:"",
        city:"",
        area:"",
        equipmentSource: "-1",
        loading:true,
        provinces:[],
        citys:[],
        areas:[],

        //自定义条件查询---end--------
        selectIds:[],//多选
        showSuccess:false,//false不显示成功提示
        selectedIdx:-1,//保存操作行的索引
        isSearch:false,//init:页面初始化；search:点击查询；paging:点击翻页；changePageSize:改变页面显示条数
        selectedPageSize:customUtils.pageSize//修改页面数据显示条数
    },
    mounted: function () {
        //初始化页面数据
        this.getAreaData();
    },
    // 在 `methods` 对象中定义方法,如果操作中函数的逻辑比较复杂，必须封装到dictType对象
    methods:{
        getList: function (eventSrc) {
            this.$data.loading = true;
            var param = {};
            param["param1"] = this.$data["province"] == '' ? "" : this.$data["province"].code;
            param["param2"] = this.$data["city"] == '' ? "" : this.$data["city"].code;
            param["param3"] = this.$data["area"] == '' ? "" : this.$data["area"].code;
            param["param4"] = this.$data["equipmentSource"];
            console.log(param)
            this.$http.post(path + "advSummary/summary", param).then(function (result) {
                if (result.body != undefined) {
                    var option = setOptionParam(result.body);
                    myChart.clear();
                    myChart.setOption(option);
                    $(window).resize(function(){
                        myChart.resize();
                    });
                    window.onresize = myChart.resize();
                    this.$data.loading = false;
                } else {
                    myChart.clear();
                    option.series[0].data = "暂无数据"
                    myChart.setOption(option);
                }
            }, function (response) {
                console.log(response.body);
            });
        },
        getAreaData:function () {
            this.$http.get("../appInfo/queryAreaTree").then(function(response){
                console.log(response)
                dataList.$data.provinces = response.body;
                console.log(dataList.$data)
            },function (res) {

            });
        },
        setCitys:function () {
            dataList.$data.citys = dataList.$data.province.citys;
            dataList.$data.city = "";
            dataList.$data.area = "";
        },
        setAreas:function () {
            dataList.$data.areas = dataList.$data.city.areas;
            dataList.$data.area = "";
        }
    }
});

function onlineNumber(type) {
    $.ajax({
        type: "post",
        async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url: path + "advSummary/summary",    //请求发送到getTig处
        data: {type: type},
        dataType: "json",        //返回数据形式为json
        beforeSend:function(XMLHttpRequest){
            $("#loading").show();
        },
        success: function (result) {
            $("#loading").hide();
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            if (result.body.length != undefined) {
                var option = setOptionParam(result);
                myChart.clear();
                myChart.setOption(option);
                $(window).resize(function(){
                    myChart.resize();
                });
                window.onresize = myChart.resize();
            } else {
                myChart.clear();
                option.series[0].data = "暂无数据"
                myChart.setOption(option);
            }
        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    });
}

function setOptionParam(result) {
    // 拼装数据
    let lineMen = []
    let lineWomen = []
    let dateTigHour = []
    for (let i = 0; i < result.body.length; i++) {
        lineMen.push(result.body[i].menNum);
        lineWomen.push(result.body[i].womenNum);
    }
    for (let i = 0; i < result.body.length; i++) {
        if (result.body[i].tigHour != undefined) {
            dateTigHour.push(result.body[i].tigHour);
        }
    }
    if (result.body.length != undefined) {
        var option = {
            tooltip: {},
            xAxis: {
                type: 'category',
                data: dateTigHour
            },
            dataZoom: [{
                type: 'slider',
                show: true,
                xAxisIndex: [0],
                left: '9%',
                bottom: -5,
                start: 10,
                end: 90 //初始化滚动条
            }],
            yAxis: [
                {
                    axisLabel: {
                        formatter: '{value}'
                    }
                }
            ],
            graphic: [
                {
                    type: 'group',
                    right: '400px',
                    top: 1,
                    children: [
                        {
                            type: 'text',
                            z: 100,
                            left: 'center',
                            top: 'middle',
                            style: {
                                fill: '#333',
                                text: [
                                    '实时情况:',
                                    '总计:' + result.body[result.body.length-1].total + '台',
                                    '昨日对比:\n',
                                    '性别占比:',
                                    '男:' + result.body[result.body.length-1].zMen + '台' + '(' + result.body[result.body.length-1].zMenBF + '%)',
                                    '女:' + result.body[result.body.length-1].zWomen + '台' + '(' + result.body[result.body.length-1].zWomenBF + '%)'
                                ].join('\n'),
                                font: '12px Microsoft YaHei'
                            }
                        }
                    ]
                },
                {
                    type: 'group',
                    right: '200px',
                    top: 1,
                    children: [
                        {
                            type: 'text',
                            z: 100,
                            left: 'center',
                            top: 'middle',
                            style: {
                                fill: '#333',
                                text: [
                                    '年龄分布:',
                                    '0 - 10岁:' + result.body[result.body.length-1].tenAge + '(' + result.body[result.body.length-1].tenAgeBF  + '%)',
                                    '11 - 20岁:' + result.body[result.body.length-1].twentyAge + '(' + result.body[result.body.length-1].twentyAgeBF  + '%)',
                                    '21 - 30岁:' + result.body[result.body.length-1].thirtyAge + '(' + result.body[result.body.length-1].thirtyAgeBF  + '%)',
                                    '31 - 40岁:' + result.body[result.body.length-1].FortyAge + '(' + result.body[result.body.length-1].FortyAgeBF  + '%)',
                                    '41 - 50岁:' + result.body[result.body.length-1].FiftyAge + '(' + result.body[result.body.length-1].FiftyAgeBF  + '%)',
                                    '51岁以上:' + result.body[result.body.length-1].FinalAge + '(' + result.body[result.body.length-1].FinalAgeBF  + '%)',
                                ].join('\n'),
                                font: '12px Microsoft YaHei'
                            }
                        }
                    ]
                }
            ],
            toolbox: {
                show: true,
                orient: 'horizontal',
                showTitle: true,
                feature: {
                    magicType: {
                        type: ['line']
                    },
                    saveAsImage: {
                        type: 'png',
                        show: true,
                        title: '保存为图片',
                    },
                    restore: {show: true}
                }
            },
            series: [{
                name: '女',
                type: 'bar',
                data: lineWomen
            },
                {
                    name: '男',
                    type: 'bar',
                    data: lineMen
                }
            ]
        };
        return option;
    } else {
        myChart.clear();
        option.series[0].data = "暂无数据"
        myChart.setOption(option);
    }
};